<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="video-preview" v-if="currItem && visible">
                <!-- 关闭按钮 -->
                <div class="close-btn" @click="onClose">
                    <var-icon name="window-close" color="#fff" size="24" />
                </div>

                <div class="item--title">{{ currItem.name }}</div>

                <VideoM ref="videoRef" :data="currItem" :ref="videoRef" :muted="false" />

                <div class="right-box">
                    <div class="avatar">
                        <img :src="currItem.user.avatar ||
                            `${_oss_}images/user/default-avatar.png`
                            " />
                    </div>

                    <div class="s--icon icon-eye">
                        <img :src="`${_oss_}images/mobile/works/video/icon-eye.svg`" />
                        <div class="s--text">{{ currItem.page_view }}</div>
                    </div>
                    <div class="s--icon icon-heart" @click="onLike(currItem)">
                        <img :src="currItem.is_like
                            ? `${_oss_}images/mobile/works/video/icon-heart_active.svg`
                            : `${_oss_}images/mobile/works/video/icon-heart.svg`
                            " />
                        <div class="s--text">{{ currItem.like }}</div>
                    </div>
                    <div class="s--icon icon-comment" @click="onComment(currItem)">
                        <img :src="`${_oss_}images/mobile/works/video/icon-comment.svg`" />
                        <div class="s--text">{{ currItem.comment }}</div>
                    </div>
                    <div class="s--icon icon-star" @click="onStar(currItem)">
                        <img :src="currItem.is_star
                            ? `${_oss_}images/mobile/works/video/icon-star_active.svg`
                            : `${_oss_}images/mobile/works/video/icon-star.svg`
                            " />
                        <div class="s--text">{{ currItem.star }}</div>
                    </div>
                    <div class="s--icon icon-share" @click="onShare(currItem)">
                        <img :src="`${_oss_}images/mobile/works/video/icon-share.svg`" />
                        <div class="s--text">{{ currItem.share }}</div>
                    </div>
                </div>

                <div class="bottom-box">
                    <div class="bottom-box__title">
                        {{ currItem.user.nickname || currItem.user.mobile }}

                        <div class="make-same-btn" @click="onMakeSame(currItem)">
                            <img :src="`${_oss_}images/mobile/works/icon-make.png`" />
                            制作
                        </div>
                    </div>

                    <div class="bottom-box__desc">
                        <template v-if="!!currItem.introduce">
                            {{
                                currItem.introduce.length > introduceLen
                                ? getHiddenIntroduce(currItem.introduce)
                                : currItem.introduce
                            }}
                            <span class="expand-btn" v-if="currItem.introduce.length > introduceLen"
                                @click="onExpand(currItem)">
                                展开
                            </span>
                        </template>
                    </div>

                    <div class="exp-btn" @click="onPreview(currItem)">
                        立即体验
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>

    <var-popup position="bottom" :overlay="false" v-model:show="moreShow">
        <div class="introduce-block">
            <div class="introduce-arrow" @click="moreShow = false">
                <img :src="`${_oss_}images/mobile/works/icon-arrow-top.svg`" />
            </div>

            <div class="introduce-top">
                <div class="introduce-top__title">
                    {{ currItem.user.nickname || currItem.user.mobile }}
                </div>

                <div class="make-same-btn" @click="onMakeSame(currItem)">
                    <img :src="`${_oss_}images/mobile/works/icon-make-blue.svg`" />
                    制作
                </div>
            </div>
            <div class="introduce-box">
                {{ currItem.introduce }}
            </div>
        </div>
    </var-popup>
</template>
<script setup>
import { useLike, useStar } from "@/hooks";
import {
    SetTaskScore,
    PostWorksShare,
    GetWorksShare,
    GetEditVersion,
} from "~/api";
const { onLike } = useLike();
const { onStar } = useStar();
const dialogStore = useDialogStore();
const userStore = useUserStore();
const pageStore = usePageStore();
const introduceLen = 31;
const visible = ref(false);
const currItem = ref(null);
const currType = ref(null);
const videoRef = ref(null);

const moreShow = ref(false);

const getHiddenIntroduce = (introduce) => {
    return introduce.slice(0, introduceLen) + "...";
};

const onClose = () => {
    visible.value = false;
};

const onPreview = () => {
    if (userStore.isLogin) {
        SetTaskScore({
            code: 1003,
            _id: currItem.value.id,
        });

        window.open(
            currType.value == 1
                ? currItem.value.url
                : currItem.value.url.replace(
                    "mshare.vrnewg.com",
                    "kj-mshare.vrnewg.com"
                ),
            "_self"
        );
    } else {
        LoginModal(
            true,
            {
                url:
                    currType.value == 1
                        ? currItem.value.url
                        : currItem.value.url.replace(
                            "mshare.vrnewg.com",
                            "kj-mshare.vrnewg.com"
                        ),
            },
            {
                code: 1003,
                _id: currItem.value.id,
            },
            false
        );
    }
};

const onExpand = () => {
    moreShow.value = true;
};

const onMakeSame = async () => {
    if (userStore.isLogin) {
        if (pageStore.isMobile) {
            const res = await GetEditVersion();
            if (localStorage.getItem("editor_version") !== res.data) {
                localStorage.setItem("editor_version", res.data);
                dialogStore.isEditorUpdateTipsDialogVisible = true;
            } else {
                Message().warning("请在电脑端网站打开！网址www.ykjhr.com");
            }
        } else {
            const search =
                "tid=" +
                item.templates_id +
                "&type=template&uid=" +
                userStore.userInfo.id;
            const newUrl = `https://${currType.value == 1 ? "medit" : "kj-medit"
                }.vrnewg.com/?${aesEncrypt(search)}`;
            jumpUrl(newUrl);
        }
    } else {
        LoginModal(
            true,
            pageStore.isMobile
                ? {}
                : {
                    url: `https://${currType.value == 1 ? "medit" : "kj-medit"
                        }.vrnewg.com/`,
                    search: "tid=" + item.templates_id + "&type=template",
                    params: ["uid"],
                    encrypt: true,
                },
            {},
            !pageStore.isMobile
        );
    }
};

const onShare = async () => {
    dialogStore.isShareTemplateDialogVisible = true;
    dialogStore.shareUrl =
        currType.value == 1
            ? currItem.value.url
            : currItem.value.url.replace(
                "mshare.vrnewg.com",
                "kj-mshare.vrnewg.com"
            );
    dialogStore.shareName = currItem.value.name;

    await SetTaskScore({
        code: 1004,
        _id: currItem.value.id,
    });

    await PostWorksShare({
        work_id: currItem.value.id,
    });

    const res = await GetWorksShare({ work_id: currItem.value.id });
    currItem.value.share = res.data;
};

const onComment = async () => {
    if (userStore.isLogin) {
        dialogStore.isCommentListDialogVisible = true;
        dialogStore.commentWorkId = currItem.value.id;
    } else {
        LoginModal();
    }
};

defineExpose({
    async show(item, type) {
        visible.value = true;
        currItem.value = item;
        currType.value = type;
        await nextTick();
        videoRef.value.play();
    },
});
</script>
<style lang="scss" scoped>
.video-preview {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 998;

    .close-btn {
        position: absolute;
        left: 10px;
        top: 10px;
    }

    .item--title {
        text-align: center;
        height: 100px;
        text-align: center;
        font-weight: 800;
        font-size: 23px;
        color: #fff;
        padding-top: 25px;
    }

    :deep(.video-box) {
        width: 100%;
        position: absolute;
        top: 270px;
        left: 0;
        z-index: 1;
        transform: translateY(-50%);
    }

    .right-box {
        position: absolute;
        right: 13px;
        bottom: 15%;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: center;

        .avatar {
            margin-bottom: 15px;

            img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                object-fit: cover;
            }
        }

        .s--icon {
            margin-bottom: 15px;

            img {
                width: 35px;
            }

            .s--text {
                font-weight: 500;
                font-size: 14px;
                color: #ffffff;
                text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6);
                text-align: center;
            }

            .icon-heart {
                width: auto;
                height: 29px;
            }
        }
    }

    .bottom-box {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        padding-bottom: 20px;
        z-index: 98;

        &__title {
            display: flex;
            align-items: center;
            width: 100%;
            font-weight: 800;
            font-size: 16px;
            color: #fff;
            padding-left: 12px;

            .make-same-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 55px;
                height: 23px;
                background: #5185fb;
                border-radius: 3px;
                font-weight: 500;
                font-size: 12px;
                color: #fff;
                margin-left: 13px;

                img {
                    width: 11px;
                    height: 11px;
                    margin-right: 4px;
                }
            }
        }

        &__desc {
            width: 279px;
            min-height: 20px;
            font-weight: 500;
            font-size: 14px;
            color: #fff;
            line-height: 24px;
            margin: 10px 0;
            padding-left: 12px;

            .expand-btn {
                font-weight: 800;
                font-size: 14px;
                color: #fff;
            }
        }

        .exp-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 350px;
            height: 45px;
            background: #5185fb;
            border-radius: 3px;
            color: #fff;
            font-weight: bold;
            font-size: 17px;
            margin: 0 auto;
        }
    }
}

.introduce-box {
    font-weight: 500;
    font-size: 14px;
    color: #666666;
    line-height: 24px;
    padding: 20px;
    text-align: justify;
    word-wrap: break-word;
    word-break: break-all;
}

.introduce-block {
    width: 100%;
    border-radius: 15px 15px 0 0;
    background-color: #fff;
}

.introduce-arrow {
    width: 16px;
    margin: 0 auto;
    padding: 0 0 10px;
    transform: rotate(180deg);

    img {
        width: 100%;
    }
}

.introduce-top {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;

    &__title {
        font-weight: 800;
        font-size: 16px;
        color: #333333;
    }

    .make-same-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 23px;
        background: rgba(80, 133, 251, 0.2);
        border-radius: 3px;
        font-weight: 500;
        font-size: 12px;
        color: #5185fb;

        img {
            width: 11px;
            height: 11px;
            margin-right: 4px;
        }
    }
}
</style>
